<template>
  <div>
      <!-- 撑住页脚处文档流 -->
        <div style="width: 100%;height :14vw;"></div>
        <!-- 页脚 -->
        <ul class="footer">
            <li @click="tohome()">
                <i class="fa fa-home"></i>
                <p>首页</p>
            </li>
            <li>
                <i class="fa fa-compass"></i>
                <p>发现</p>
            </li>
            <li @click="toOrderList">
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
            <li>
                <i class="fa fa-user-o"></i>
                <p>我的</p>
            </li>
        </ul>
  </div>
</template>

<script>
export default {
    name:'Footer',
    methods:{
        tohome(){
            this.$router.push('/home')
        },
        toOrderList(){
            this.$router.push('/orderlist')
        }
    }
}
</script>

<style scoped>
/* *********************** 页脚 部分 ***************************** */
.container .footer{
    width: 100%;
    height: 14vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: white;
    border-top: 1px solid #ddd;
}
.container .footer li{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;
}
.container .footer li i{
    font-size: 5vw;
}
.container .footer li p{
    font-size: 2.8vw;
}
</style>